* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body > div {margin: 10px 0 10px 20px;width: 30%;float: left;}

p {text-align: center;height: 40px;line-height: 40px;font-size: 20px;font-family: Consolas, serif;color: white}

.box {display: flex;height: 25vh;}

.item {font-size: 20px;padding: 20px;background-color: #cccccc;border: 1px solid #ffffff;}

/*-----------------------------------------*/
.flex-direction {border: 2px solid yellowgreen;}

.flex-direction p {background-color: yellowgreen;}

.flex-direction .box {justify-content: space-around;align-items: center}

.flex-direction .row {flex-direction: row}

.flex-direction .row-reverse {flex-direction: row-reverse}

.flex-direction .column {flex-direction: column}

.flex-direction .column-reverse {flex-direction: column-reverse}

/*-----------------------------------------*/
.align-items {border: 2px solid hotpink;}

.align-items p {background-color: hotpink;}

.align-items .box {justify-content: space-around;}

.align-items .flex-start {align-items: flex-start;}

.align-items .center {align-items: center;}

.align-items .flex-end {align-items: flex-end;}

.align-items .stretch {align-items: stretch;}

/*-----------------------------------------*/
.justify-content {border: 2px solid skyblue;}

.justify-content p {background-color: skyblue;}

.justify-content .box {align-items: center;}

.justify-content .flex-start {justify-content: flex-start;}

.justify-content .center {justify-content: center;}

.justify-content .flex-end {justify-content: flex-end;}

.justify-content .space-between {justify-content: space-between;}

.justify-content .space-around {justify-content: space-around;}

.justify-content .space-evenly {justify-content: space-evenly;}

/*-----------------------------------------*/
.align-self {border: 2px solid #cccccc;}

.align-self p {background-color: #cccccc;}

.align-self .box {justify-content: space-around;}

.align-self .item:nth-child(1) {align-self: flex-start;}

.align-self .item:nth-child(2) {align-self: center;}

.align-self .item:nth-child(3) {align-self: flex-end;}

.align-self .item:nth-child(4) {align-self: stretch;}

/*-----------------------------------------*/
.flex-grow {border: 2px solid #e17055;}

.flex-grow p {background-color: #e17055;}

.flex-grow .box {align-items: center;justify-content: space-around;}

.flex-shrink .item {width: 150px;}

.flex-grow .item:nth-child(1) {flex-grow: 1}

.flex-grow .item:nth-child(2) {flex-grow: 2}

.flex-grow .item:nth-child(3) {flex-grow: 3}

/*-----------------------------------------*/
.flex-shrink {border: 2px solid #487eb0;}

.flex-shrink p {background-color: #487eb0;}

.flex-shrink .box {align-items: center; justify-content: space-around;}

.flex-shrink .item {width: 150px;}

.flex-shrink .item:nth-child(1) {flex-shrink: 1}

.flex-shrink .item:nth-child(2) {flex-shrink: 2}

.flex-shrink .item:nth-child(3) {flex-shrink: 3}

/*-----------------------------------------*/
.flex {border: 2px solid #10ac84;}

.flex p {background-color: #10ac84;}

.flex .box {align-items: center; justify-content: space-around;}

.flex .item {width: 150px;}

.flex .item:nth-child(1) {flex: 1}

.flex .item:nth-child(2) {flex: 1}

.flex .item:nth-child(3) {flex: 2}

/*-----------------------------------------*/
.xie {border: 2px solid #9c88ff;}

.xie p {background-color: #9c88ff;}

.xie .box {justify-content: space-between}

.xie .item:nth-child(1) {align-self: flex-start}

.xie .item:nth-child(2) {align-self: center}

.xie .item:nth-child(3) {align-self: flex-end}